<template>
  <div>
    <Button
      icon="ios-add-circle-outline"
      type="primary"
      @click="append({})"
    >添加分类</Button>
    <Tree
      :data="data5"
      style="min-width:400px;margin-top:20px"
      :render="renderContent"
      class="demo-tree-render"
    ></Tree>

    <Modal
      :title="title"
      v-model="modal9"
      draggable
      @on-ok="handleAdd(editTitle)"
      :styles="{top: '20px'}"
    >
      <Input
        :style="{margin: '10px auto'}"
        v-model="editTitle"
        placeholder="请输入分类标题"
      />

    </Modal>
    <mg-store
      @on-click="closestore"
      :storeId="id"
      :mgStoreShow="mgStoreShow"
    ></mg-store>
  </div>

</template>
<script>
import { getCategory, addCategory, removeCategory } from "@/api/data";
import { generateData } from "@/libs/ergodic";
import { getDate } from "@/libs/tools";
import mgStore from "./store";

export default {
  components: { mgStore },
  data() {
    return {
      data5: [],
      mgStoreShow: false,
      modal9: false,
      id: "",
      editTitle: "",
      title: "",
      buttonProps: {
        type: "default",
        size: "small"
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getCategory()
        .then(this.getDataSuccess)
        .catch(error => console.error(error));
    },
    handleAdd(editTitle) {
      var title = editTitle;
      var pid = this.addId;
      var data = {
        title,
        platform: 0,
        createTime: getDate(+new Date() / 1000, "year")
      };
      if (pid) {
        data.pid = pid;
      }
      addCategory(data)
        .then(this.getData)
        .catch(error => console.error(error));
    },
    getDataSuccess(res) {
      console.log(res);
      this.data5 = generateData(res.data);
    },
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%"
          }
        },
        [
          h("span", [
            h("Avatar", {
              props: {
                shape: "square",
                type: "ios-paper-outline",
                src: data.icon
              },
              style: {
                marginRight: "8px"
              }
            }),
            h("span", data.title)
          ]),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                // float: "right",
                marginLeft: "32px"
              }
            },
            [
              h("Button", {
                props: Object.assign({}, this.buttonProps, {
                  icon: "ios-add",
                  type: "primary"
                }),
                style: {
                  marginRight: "8px"
                },
                on: {
                  click: () => {
                    this.append(data);
                  }
                }
              }),
              h("Button", {
                props: Object.assign({}, this.buttonProps, {
                  icon: "ios-hammer-outline",
                  type: "success"
                }),
                style: {
                  marginRight: "8px"
                },
                on: {
                  click: () => {
                    this.edieData(data);
                  }
                }
              }),
              h("Button", {
                props: Object.assign({}, this.buttonProps, {
                  icon: "ios-trash-outline",
                  type: "error"
                }),
                on: {
                  click: () => {
                    this.remove(root, node, data);
                  }
                }
              })
            ]
          )
        ]
      );
    },
    edieData(data) {
      this.title = "修改分类";
      this.id = data.id;
      this.mgStoreShow = true;
    },
    closestore(res) {
      this.mgStoreShow = false;
      if (res) this.getData();
    },
    append(data) {
      this.title = "添加分类";
      if (data.id) {
        this.addId = data.id;
      } else {
        this.addId = null;
      }
      // this.editTitle
      this.modal9 = true;
    },
    remove(root, node, data) {
      if (data.children.length > 0) {
        this.$Message.error({
          background: true,
          content: "请先删除该分类下的所有分类",
          closable: true,
          duration: 5
        });
        return;
      }

      this.$Modal.confirm({
        title: "提示",
        content: "<p>是否确定删除</p>",
        onOk: () => {
          this.$Message.success({
            background: true,
            content: "删除成功"
          });
          removeCategory({ id: data.id }).then(this.getData);
        },
        onCancel: () => {
          this.$Message.info("取消了操作");
        }
      });
    }
  }
};
</script>
<style>
.demo-tree-render .ivu-tree-title {
  width: 100%;
}
</style>
